import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput ,KeyboardAvoidingView, Alert} from 'react-native';
import OpacityBotton from './Widget/ReactBotton'
import LinkText from './Widget/LinkText'
import { scaleSizeH, scaleSizeW, setSpText } from '../util/ScreenUtil.js'
import userServices from "../services/users.js";
import Icon from "../assets/fonts/iconfont.js";
import {set} from "../util/Storage"
export default function Login(props) {
    // 声明一个新的叫做 “count” 的 state 变量
    const SELETED="#49be5e"
    const NO_SELETED="#c7c7c7"
    const [phone, setphone] = useState("");
    const [password, setpassword] = useState("");
    const [phoneStyle,setphoneStyle]=useState(NO_SELETED)
    const [pwdStyle,setpwdStyle]=useState(NO_SELETED)
    return (
        <KeyboardAvoidingView style={styles.container} behavior="height" enabled>
            <View style={styles.herder}>
                <Text style={styles.text}>欢迎来到豆瓣</Text>
            </View>
            <View style={styles.inputcontainer}>
                <TextInput
                    style={{  borderColor:phoneStyle, borderBottomWidth: 2 ,padding:0}}
                    placeholder="手机号/邮箱"
                    selectionColor="#49be5e"
                    onFocus={()=>{setphoneStyle(SELETED)}}
                    onBlur={()=>{setphoneStyle(NO_SELETED)}}
                    onChangeText={(value) => setphone(value)}
                    value={phone}
                />
                <TextInput
                    secureTextEntry={true}
                    style={{ borderColor:pwdStyle, borderBottomWidth: 2,padding:0}}
                    placeholder="密码"
                    onFocus={()=>{setpwdStyle(SELETED)}}
                    onBlur={()=>{setpwdStyle(NO_SELETED)}}
                    onChangeText={(value) => setpassword(value)}
                    value={password}
                />
            </View>
            <OpacityBotton
                buttonText={styles.buttonText}
                buttonStyle={styles.buttoncontarner}
                onPress={onPressLearnMore}
            >登陆
            </OpacityBotton>
            <View style={styles.linkstyle}>
                <LinkText linktext={styles.linktext}>注册豆瓣</LinkText>
                <Text style={styles.linkwight}></Text>
                <LinkText linktext={styles.linktext}>忘记密码</LinkText>
            </View>
            <View style={styles.footer}>
                <LinkText linktext={styles.footlinktext}><Icon name="weixin" size={setSpText(35)} color="#a3a3a3" />&ensp;微信登录</LinkText>
                <Text style={styles.linkwight}></Text>
                <LinkText linktext={styles.footlinktext}><Icon name="weibo" size={setSpText(35)} color="#a3a3a3" />&ensp;微博登陆</LinkText>
            </View>
        </KeyboardAvoidingView>
    );
    async function  onPressLearnMore() {
     const  data= await  userServices.login({
            username:phone,
            password
        })
    if (data.status) {
        Alert.alert(
            '提示',
            '登陆成功',
            [
              {text: 'OK', onPress: () =>{
                  props.navigation.goBack()
                  set("user",{phone})
            }},
            ],
            { cancelable: false }
          )
    }else{
        Alert.alert(
            '警告',
            '登陆失败',
            [
              {text: 'OK', onPress: () => console.log('OK Pressed')},
            ],
            { cancelable: false }
          )
    }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: scaleSizeW(750),
        alignItems: "center"
    },
    img: {
        width: scaleSizeW(750),
        height: scaleSizeH(1500)
    },
    herder: {
        width: scaleSizeW(664),
        height: scaleSizeH(363),
        alignItems: "center",
        color: "#141823",
        justifyContent: "center"
    },
    text: {
        fontSize: setSpText(80),
        color: "#49be5e"
    },
    inputcontainer: {
        width: scaleSizeW(664),
        height: scaleSizeH(200),
        marginBottom: scaleSizeH(40),
        justifyContent:"space-between"
    },
    buttoncontarner: {

        width: scaleSizeW(664),
        height: scaleSizeH(100),
        alignItems: 'center',
        justifyContent: "center",
        borderRadius: 5,
        backgroundColor: '#41bd55'
    },
    buttonText: {
        fontSize: setSpText(30),
        textAlign: 'center',
        padding: 12,
        color: 'white'
    }
    ,linkstyle:{
        marginTop:50,
        width:scaleSizeW(325),
        height:scaleSizeH(30),
        flexGrow:1,
        flexDirection:"row",
        justifyContent:"space-between",
        lineHeight:30
    },
    linktext:{
        fontSize: setSpText(28),
       
    },
    footlinktext:{
        fontSize: setSpText(35),
       
    },
    linkwight:{
        height:scaleSizeH(36),
        borderRightWidth:1
        ,borderRightColor:"#c7c7c7"
    },
    footer:{
        width:scaleSizeW(560),
        flexDirection:"row",
        justifyContent:"space-between",
        alignItems:"center",
        height:scaleSizeH(35),
        marginBottom:scaleSizeH(40),
    }
});
Login.navigationOptions = {
    title: '登陆',
    headerShown:true 
}